<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>部门信息</title>
    <link rel="stylesheet" href="/static/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div style="margin: 10px 10px 10px 10px;">
    <!--数据表格主体-->
    <table id="dept-table" lay-filter="dept-table"></table>
</div>
<script src="/static/lib/layui/layui.js" charset="utf-8"></script>
<script>
    var checkedbox=[];

    layui.extend({
        treeTable: '/static/js/lay-module/treetable-lay/treeTable' //table树形扩展
    }).use(['treeTable'], function () {
        var $ = layui.jquery;
        var treeTable = layui.treeTable;
        // 渲染树形表格
        treeTable.render({
            elem: '#dept-table',
            url: '/sys/dept/list',        //获取所有部门
            tree: {
                iconIndex: 1,           // 折叠图标显示在第几列
                isPidData: true,        // 是否是id、pid形式数据
                idName: 'id',  // id字段名称
                pidName: 'parentId',     // pid字段名称
                getIcon: function (obj) {
                    return '';
                }
            },
            cols: [
                [
                    {type: 'radio'},
                    {field: 'name', width: '50%', title: '部门名称'},
                    {field: 'description', width: '50%', title: '描述', align: 'center'}
                ]
            ],
            skin: 'line'
        });

        treeTable.on('checkbox(dept-table)', function(obj){
            if(obj.checked){
                checkedbox['id']=obj.data.id;
                checkedbox['name']=obj.data.name;
            }
        });
    });
</script>
</body>
</html>